<template>
  <div id="home">
    <nav-bar>
      <template v-slot:default>图书兄弟</template>
    </nav-bar>
    <tab-control v-show="isShowTabControl" :titles="['畅销','新书','精选']" @tab-click="tabClick"></tab-control>
    <div ref="wrapper" class="wrapper">
      <div class="content">
        <div ref="bannerRef">
         <banner-view :banners=" state.slides"></banner-view>
          <recommend-view :recommend="state.goods.data || []">
          </recommend-view>
        </div>
        <tab-control :titles="['畅销','新书','精选']" @tab-click="tabClick"></tab-control>
        <good-list :goods="goodsState[goodsState.currentType].list"></good-list>
      </div>
    </div>
    <back-view v-if="isShowBack" @back-click="back"></back-view>
  </div>

</template>

<script lang="ts" setup>
import NavBar from "@/components/common/navbar/NavBar.vue";
import RecommendView from "@/views/home/components/RecommendView.vue";
import TabControl from "@/components/common/tabControl/TabControl.vue";
import {getHomeGoodsAll, getHomeGoodsByType} from "@/network/home";
import {nextTick, onMounted, ref, watch} from "vue";
import {goodsState, state} from "@/views/home/state";
import GoodList from "@/components/common/goods/GoodsList.vue";
import BScroll from "@better-scroll/core";
import PullUp from "@better-scroll/pull-up";
import BackView from "@/components/common/back/BackView.vue";
import type {Goods} from "@/types/goods";
import BannerView from "@/views/home/components/BannerView.vue";

BScroll.use(PullUp);

let bScroll: any = null;
const tabIndex = ref(0);
const wrapper = ref(null);
const bannerRef = ref(null);
const isShowTabControl = ref(false);
const isShowBack = ref(false);

onMounted(() => {

  getHomeGoodsAll().then((res) => {
    state.categories = res.categories;
    state.goods!.data = res.goods.data;
    state.slides= res.slides;
  });

  getHomeGoodsByType('sales', 1).then((res) => {
    goodsState.sales.list = res.goods.data;
  })

  getHomeGoodsByType('news', 1).then((res) => {
    goodsState.news.list = res.goods.data;
  })

  getHomeGoodsByType('recommend', 1).then((res) => {
    goodsState.recommend.list = res.goods.data;
  })


})

watch(goodsState, () => {
  nextTick(() => {
    bScroll = new BScroll(wrapper.value!, {
      probeType: 3,
      click: true,
      pullUpLoad: true // 上拉加载更多，默认 false
    });
    // bScroll.refresh(); // 刷新 重新计算高度
    bScroll.on('scroll', (position: { x: number, y: number }) => {
      // console.log(position);
      isShowBack.value = isShowTabControl.value = (-position.y) > (bannerRef.value! as Element).clientHeight;
    })
    bScroll.on('refresh',() => {
      console.log('refresh height:',(wrapper.value! as Element).children[0].clientHeight);

    })
    bScroll.on('pullingUp', () => {
      console.log('加载更多');
      type ObjectKey =  keyof typeof goodsState;
      const type = goodsState.currentType as ObjectKey
      const currentGood = (goodsState[type] as {list:Goods.Dto[], page:number});
      currentGood.page =currentGood.page + 1
      getHomeGoodsByType(goodsState.currentType, currentGood.page).then((res) => {
        currentGood.list.push(...res.goods.data);
        // 完成上拉，等数据请求完成，要将新数据展示出来
        bScroll.finishPullUp();
        bScroll.refresh();
      });


    })
  });

})

function tabClick(index: number) {
  tabIndex.value = index;
  let types = ['sales', 'news', 'recommend'];
  goodsState.currentType = types[index];
}

function back() {
  bScroll && bScroll.scrollTo(0, 0, 500);
}
</script>

<style lang="scss">
#home {
  position: relative;
  height: 100vh;

  .wrapper {
    position: absolute;
    top: 48px;
    bottom: 60px;
    left: 0;
    right: 0;
    overflow: hidden; // 超出部分隐藏
    .content {

    }
  }
}

</style>